<template>
  <div class="video-list">
    <div class="video-item left">
      <van-image class="video" :src="video_group_info.cover"></van-image>
      <div>
        <div class="c2">{{video_group_info.title}}</div>
        <div class="c9">{{video_group_info.desc}}</div>
      </div>
    </div>
    <div class="left wrap">
      <div v-for="(item, index) in video_list" @click="gotoVideoDetail(item.id)" class="btn-episode">{{item.position_name}}</div>
    </div>
    <div class="comment">评论</div>
    <div class="hc wc no-comment">暂无评论</div>

  </div>
</template>
<script>
import navbar from '../../components/navbar/index.vue'
import { computed, defineComponent,ref,toRefs,onMounted,reactive,watch,getCurrentInstance } from 'vue'
export default defineComponent({
  components:{
    navbar
  },
  setup(props) {
    const { proxy } = getCurrentInstance()
    const data = reactive({
      video_group_info:{},
      video_list:[]
    })
    onMounted( async () => {
      const res = await proxy.$get("v1/video_group/detail", { id: proxy.$route.query.id });
      data.video_group_info = res.data.video_group;
      data.video_list = res.data.video_list;
    })
    const gotoVideoDetail = async id => {
      proxy.$router.push({
        path:"/videoDetail",
        query:{id}
      })
    }
    return{
      ...toRefs(data),
      gotoVideoDetail
    }
  }
})
</script>
<style lang="less" scoped>
.home{
  background:rgba(248,248,248,1);min-height: calc(100vh);
  overflow: hidden;
  background-size: cover;
  position: relative;
}
.comment{
  padding-top: 100px;
  font-size: .24rem;
}
.no-comment{
  height: 300px;
  color: #999999;
  font-size: .12rem;
}
.btn-episode{
  font-size: .14rem;
  border: 1px solid #999999;
  border-radius: 10px;
  padding: 10px;
  margin-left: 20px;
  margin-top: 20px;
}
.video-list{
  padding: 10px;
}
.video{
  margin-right: 20px;
  width: 250px;
  height: 250px;
}
.video-item{
  .c2{
    padding-top:20px;
    padding-bottom: 20px;
    font-size: .2rem;
  }
  .c9{
    
    padding-top:20px;
    font-size: .14rem;
  }
  // width: 49%;
  padding-bottom: 10px;
}
</style>
